import { ProTable, type ProColumns } from '@/components/Pro';
import {
  deviceControllerPageDeviceBasicConfigOverview,
  deviceControllerPageDeviceOverview,
} from '@/services/ess/deviceInfo';
import { useIntl } from '@umijs/max';
import React from 'react';
import Styles from './CommonStyle.less';

const BoxView: React.FC = () => {
  const intl = useIntl();
  const tableColumns: ProColumns[] = [
    {
      title: intl.formatMessage({ id: 'global.s/N' }),
      dataIndex: 'pageIndex',
      valueType: 'index',
    },
    {
      title: intl.formatMessage({ id: 'equipmentMonitor.manufacturer' }),
      dataIndex: 'name',
      search: false,
    },
    {
      title: intl.formatMessage({ id: 'stationRealtimeMonitoring.realTimePower' }),
      dataIndex: 'activePower',
      search: false,
    },
    {
      title: intl.formatMessage({ id: 'stationRealtimeMonitoring.dailyPower' }),
      dataIndex: 'dayPowerConsumption',
      search: false,
    },
    {
      title: intl.formatMessage({ id: 'stationRealtimeMonitoring.totalPower' }),
      dataIndex: 'totalPowerConsumption',
      search: false,
    },
  ];
  const baseInfoColumns: ProColumns[] = [
    {
      title: intl.formatMessage({ id: 'global.s/N' }),
      dataIndex: 'pageIndex',
      valueType: 'index',
    },
    {
      title: intl.formatMessage({ id: 'equipmentMonitor.manufacturer' }),
      dataIndex: 'manufacturer',
    },
    {
      title: intl.formatMessage({ id: 'equipmentMonitor.equipmentModel' }),
      dataIndex: 'deviceModel',
      valueType: 'select',
    },
    {
      title: intl.formatMessage({ id: 'equipmentMonitor.equipmentQuantity' }),
      dataIndex: 'deviceCount',
    },
    {
      title: `${intl.formatMessage({ id: 'equipmentMonitor.ratedInputVoltage' })}（V）`,
      dataIndex: 'ratedInVol',
    },
    {
      title: `${intl.formatMessage({ id: 'equipmentMonitor.ratedInputCurrent' })}（A）`,
      dataIndex: 'ratedInCurr',
    },
    {
      title: `${intl.formatMessage({ id: 'equipmentMonitor.ratedOutputVoltage' })}（V）`,
      dataIndex: 'ratedOutVol',
    },
    {
      title: `${intl.formatMessage({ id: 'equipmentMonitor.ratedOutputCurrent' })}（A）`,
      dataIndex: 'ratedOutCurr',
    },
    {
      title: `${intl.formatMessage({ id: 'equipmentMonitor.ratedOutputPower' })}（kW）`,
      dataIndex: 'ratedOutPower',
    },
    {
      title: intl.formatMessage({ id: 'equipmentMonitor.frequency' }),
      dataIndex: 'outFreq',
    },
  ];

  return (
    <>
      {/*<Flex justify={'space-between'}>*/}
      {/*{BoxViewColumns.map((item: BoxViewType) => {*/}
      {/*  return (*/}
      {/*    <Flex key={item.value}>*/}
      {/*      <Flex>*/}
      {/*        <div className={Styles.ColumnsIcon}>{item.icon}</div>*/}
      {/*        <div className={Styles.ColumnsText}>*/}
      {/*          <div className={Styles.ColumnsTextTitle}>{item.label}</div>*/}
      {/*          <span className={Styles.ColumnsTextContent}>*/}
      {/*            {boxData[item.value]}&nbsp;*/}
      {/*            {item.value === 'capacity' ? boxData.capacityUnit : item.unit}*/}
      {/*          </span>*/}
      {/*        </div>*/}
      {/*      </Flex>*/}
      {/*    </Flex>*/}
      {/*  );*/}
      {/*})}*/}
      {/*</Flex>*/}
      <ProTable
        style={{ marginBottom: '10px' }}
        title={() => {
          return (
            <div className={Styles.tableTitle} style={{ marginLeft: '-10px' }}>
              {' '}
              {intl.formatMessage({ id: 'equipmentMonitor.basicConfigurationFile' })}
            </div>
          );
        }}
        search={false}
        columns={baseInfoColumns}
        // dataSource={boxConfigInfo?.records}
        rowKey={'pageIndex'}
        request={async (value) => {
          let reslut = await deviceControllerPageDeviceBasicConfigOverview({
            ...value,
            deviceType: 10,
          });
          return reslut;
        }}
      ></ProTable>
      <div className={Styles.divider}></div>
      <ProTable
        title={() => {
          return (
            <div className={Styles.tableTitle} style={{ marginLeft: '-10px' }}>
              {' '}
              {intl.formatMessage({ id: 'equipmentMonitor.realTimeCollectionOverview' })}
            </div>
          );
        }}
        rowKey={'pageIndex'}
        columns={tableColumns}
        search={false}
        style={{ marginTop: '30px' }}
        request={async (value) => {
          try {
            let reslut = await deviceControllerPageDeviceOverview({ ...value, deviceType: 10 });
            return reslut;
          } catch (error) {}
        }}
      ></ProTable>
    </>
  );
};

export default BoxView;
